<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>账号列表</span>
    </div>

    <el-table @selection-change = "handleselection" ref="cancelselection" :data="tableData" :style="{ width: w + 'px' }">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="account" label="账号"> </el-table-column>
      <el-table-column prop="userGroup" label="用户组"> </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <span :row="scope">{{
            scope.row.ctime | formateDate
          }}</span></template
        >
      </el-table-column>
      <el-table-column prop="todo" label="操作">
        <template slot-scope="scope">
          <el-button width="90" size="mini" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除此账号吗？"
            @confirm="handleDelete(scope.row)"
            @cancel="canceldel"
          >
            <el-button slot="reference" width="90" size="mini" type="danger"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
      
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[3, 4, 5, 6, 7, 8]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    
      
         <el-button type="danger" size="small" @click="bundledel">批量删除</el-button>
    <el-button type="primary" size="small" @click="cancelselection">取消选择</el-button>

    
 
    <el-dialog :visible.sync="dialogVisible" width="400">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>编辑信息</span>
        </div>
        <el-form
          :model="editInfo"
          :rules="rules"
          ref="editInfo"
          label-width="100px"
        >
          <el-form-item label="账号" prop="account">
            <el-input v-model="editInfo.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户组" prop="userGroup">
            <el-select v-model="editInfo.userGroup" placeholder="请选择用户组">
              <el-option label="超级管理员" value="超级管理员"></el-option>
              <el-option label="普通管理员" value="普通管理员"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveeditinfo">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { validateAccount } from "@/utils/tools";

import { formateDate } from "@/utils/tools";

import { getAccountList, delAccount, editAccount, batchDelete} from "@/api/user";
export default {
  name: "AccountList",
  data() {
    return {
      tableData: [],
      w: document.body.clientWidth - 300,
      currentPage: 1,
      total: 10,
      pageSize: 4,
      dialogVisible: false,
      data: [],
      editInfo: {
        id: "",
        acccount: "",
        userGroup: "",
      },
      rules: {
        account: [
          { required: true, validator: validateAccount, trigger: "blur" },
        ],
      },
    };
  },
  // filters:{
  // filtersdata(data){
  //   return formateDate(data);
  // }
  // },

  created() {
    window.addEventListener("resize", this.resize);
    this.getData();
  },
  beforeDestroy(){
    window.removeEventListener("resize", this.resize);

  },
  methods: {
    // 选项发生改变
    handleselection(rows){
      // 把选择的id放入数组中   且必须加this这样其他函数可以用
      console.log(rows);
      
this.ids=rows.map((v)=>v.id)

    },
    cancelselection(){
  this.$refs.cancelselection.clearSelection()
    },
    bundledel(){
// 如果没有选  或者选择了又取消为空
 if(!this.ids||!this.ids.length){
   this.$message.error('选择以后再操作')
   return 0;}
  this.$confirm('此操作将批量删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
// get请求发送不了数组  必须转化字符串才可以删除
          let res = await batchDelete({ids:JSON.stringify(this.ids)})
         let  {code,msg} = res.data
         if(code==0){
           
          this.getData()
         }else{
           return 0
         }
        
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
   
    },
    
    canceldel() {
      this.$message({
        message: "取消成功",
        type: "success",
      });
    },

    async getData() {
      let res = await getAccountList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });

      let { total, data } = res.data;
   // 判断当前页没有数据 页码减一再来拿数据
      if(!data.length && this.currentPage !==1){
        this.currentPage-=1
        this.getData()
      }

      // 渲染前处理好格式
      //  data.forEach(v=> {

      //     v.ctime=formateDate(v.ctime)

      //  });

   
      console.log("66" + total, data);
      this.tableData = data;
      this.total = total;
    },

    handleEdit(row) {
      console.log(row);
      this.data = row;
      let { id, account, userGroup } = row;
      this.editInfo = { id, account, userGroup };

      this.dialogVisible = true;
    },
    async saveeditinfo() {
      this.dialogVisible = false;
      
      let res = await editAccount(this.editInfo);
      let { code, msg } = res.data;
      if (code == 0) {
    
        this.getData();
      } else {
        return false;
      }
    },

    async handleDelete(row) {
      let { id } = row;
      let res = await delAccount({ id });
      console.log(res);

      if (res.data.code === 0) {
       
        this.getData();
      } else {
        return false;
      }
    },
    resize() {
      console.log(22);
      
      this.w = document.body.clientWidth - 300;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
  },
};
</script>

<style lang="less" scoped>
.el-pagination {
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-button--danger {
  margin-left: 15px;
}
</style>
